<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.studentname" placeholder="请输学生姓名" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="warning" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableDate" style="width: 100%">
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="studentname" label="姓名"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="onEndit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="onDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination background layout="total,prev, pager, next,jumper"
                   :total="total"
                   :page-count="pages"
                   :current-page="pageNum"
                   @current-change="chagePageNum"
    />

    <!--弹框-->
    <el-dialog
        v-model="dialogVisible"
        :destroy-on-close="true"
        title="学生信息"
        width="30%"
    >
      <el-form
          ref="ruleFormRef"
          :model="addForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="学生姓名" prop="studentname">
          <el-input v-model="addForm.studentname"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="addForm.gender">
            <el-radio label="男"/>
            <el-radio label="女"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addForm.age"/>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="addForm.address" type="textarea"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            提交
          </el-button>
          <el-button @click="resetForm('ruleFormRef')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import {reactive, toRefs, onMounted, ref} from "vue";
import axios from "axios"
import {ElMessage, ElMessageBox} from "element-plus"

export default {
  name: "StudentView",
  setup() {
    //reactive函数可以把复合类型的变量变为响应式的引用
    const data = reactive({
      dialogVisible: false,
      formInline: {
        studentname: ""
      },
      pageNum: 1,
      tableDate: [],
      total: 0,
      pages: 0,
      addForm: {
        studentname: '',
        gender: "",
        age: "",
        address: ""
      },
      rules: {
        studentname: [
          {required: true, message: '请输入学生姓名', trigger: 'blur'},
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {pattern: /^(1[8-9]|[2-9]\d)$/, message: '必须是18-99之间的数字', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入家庭地址', trigger: 'blur'},
        ],
      }
    })
    const onEndit = (row) => {
      data.addForm = row
      data.dialogVisible = true;
    }
    const onSubmit = () => {
      data.pageNum = 1
      getBackData();
    }
    const onDel = (id) => {
      ElMessageBox.confirm(
          '确认是否删除该学生?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios({
              url: "/api/del/" + id,
              method: "delete"
            }).then(function (result) {
              if (result.data.code == 200) {
                ElMessage({
                  type: 'success',
                  message: '删除成功！',
                })
                getBackData();
              } else {
                ElMessage({
                  type: 'error',
                  message: '删除失败！',
                })
              }
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消！',
            })
          })
    }
    const ruleFormRef = ref();//把基本类型变量变为响应式引用，获取数据值需要加.value
    const submitForm = () => {
      console.log(ruleFormRef.value)
      ruleFormRef.value.validate(function (vaild) {
        if (vaild) {
          console.log(data.addForm)
          axios({
            url: "/api/saveOrupdate",
            method: "post",
            data: data.addForm
          }).then(function (result) {
            console.log(result)
            if (result.data.code == 200) {
              ElMessage.success("操作成功!");
              data.dialogVisible = false;
              getBackData();
            }
          })
        } else {
          console.log("数据校验失败")
          ElMessage.error("请按提示填写表单")
        }
      })
    }
    const resetForm = () => {
      ruleFormRef.value.resetFields();
    }
    const onAdd = () => {
      data.addForm = {}
      data.dialogVisible = true;
    }
    onMounted(function () {
      getBackData();
    })
    const getBackData = () => {
      axios({
        url: "/api/getPage?studentname=" + data.formInline.studentname + "&pageNum=" + data.pageNum,
        method: "get"
      }).then(function (result) {
        console.log(result)
        data.tableDate = result.data.data.records
        data.pageNum = result.data.data.current
        data.total = result.data.data.total
        data.pages = result.data.data.pages
      })
    }
    const chagePageNum = (pageNo) => {
      data.pageNum = pageNo;
      getBackData()
    }
    return {
      ...toRefs(data),
      ruleFormRef,
      getBackData,
      onSubmit,
      chagePageNum,
      onAdd,
      submitForm,
      resetForm,
      onEndit,
      onDel
    }
  }
}
</script>

<style scoped>

</style>